<template>
  <div class="page" ref="chartDom">555</div>
</template>
<script>
import * as echarts from "echarts";
import Data from "./data";
export default {
  name: "EchartsIndex",
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    createHtml(params) {
      const {
        name,
        value,
        equalName,
        equalValue,
        equalPercent,
        loopName,
        loopValue,
        loopPercent,
      } = params.data;
      const html = `<div style="font-size: 14px;font-weight: 600;color: #333">
    <span>${name}</span>
    <span>${value}</span>
    <span>${equalName}</span>
    <span>${equalValue}</span>
    <span>${equalPercent}</span>
    <span>${loopName}</span>
    <span>${loopValue}</span>
    <span>${loopPercent}</span>
    </div>`;
      return html;
    },
    createCharts() {
      this.myChart.clear();
      const option = {
        // tooltip: {
        //   trigger: "item",
        //   triggerOn: "mousemove",
        // },
        series: [
          {
            type: "tree",
            data: Data,
            top: "1%",
            left: "7%",
            bottom: "1%",
            right: "20%",
            symbolSize: 7,
            roam: true,
            symbol: "emptyCircle",
            // edgeShape: "polyline", //矩形
            scaleLimit: {
              min: 0.25,
              max: 4,
            },
            itemStyle: {
              color: "red",
              borderColor: "#c91717",
            },
            lineStyle: {
              color: "#ee8b90",
              curveness: 0.8,
            },
            label: {
              position: "left",
              verticalAlign: "bottom",
              align: "right",
              color: "#333",
              formatter: (params) => {
                const {
                  name,
                  value,
                  equalName,
                  equalValue,
                  equalPercent,
                  loopName,
                  loopValue,
                  loopPercent,
                } = params.data;
                // const arr = [
                //   `{a|${name}}`,
                //   `{a|${value}}`,
                //   `{a|${equalName}}{b|${equalValue}}{a|${equalPercent}}`,
                //   `{a|${loopName}}{c|${loopValue}}{a|${loopPercent}}`,
                // ];
                return `{a|${name}}{a|${value}}{a|${equalName}}{b|${equalValue}}{a|${equalPercent}}{a|${loopName}}{c|${loopValue}}{a|${loopPercent}}`;
                // return arr.join("\n");
              },
              rich: {
                a: {
                  color: "#333",
                  fontWeight: 600,
                  padding: [0, 5, 0, 0],
                  fontSize: 15,
                },
                b: {
                  color: "#c91717",
                  fontWeight: 600,
                  padding: [0, 5, 0, 0],
                  fontSize: 15,
                },
                c: {
                  color: "#6aa3cf",
                  fontWeight: 600,
                  padding: [0, 5, 0, 0],
                  fontSize: 15,
                },
              },

              // borderWidth: 1,
              // borderColor: "#c91717",
              // borderType: "solid",
              // padding: [5, 10, 5, 10],
              // borderRadius: 3,
            },
            leaves: {
              //叶子结点
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
              },
            },
            emphasis: {
              focus: "descendant",
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          },
        ],
        expandAndCollapse: true,
      };
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chartDom);
    this.createCharts();
  },
};
</script>
<style scoped lang="less">
.page {
  width: 100%;
  height: 800px;
  border: 1px red solid;
}
</style>
